<template>
  <a-spin :spinning="formState.uploadImgLoading">
    <page-layout>
      <a-card>
        <footer-button :buttons="buttons" />
        <!-- <a-descriptions>
          <a-descriptions-item label="课程代码">3434</a-descriptions-item>
          <a-descriptions-item label="项目名">四川大学成都校区项目</a-descriptions-item>
          <a-descriptions-item label="前置课">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</a-descriptions-item>
        </a-descriptions> -->
        <a-form ref="formRef" :model="formState.data">
          <a-card title="基础信息">
            <a-row>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="课程名称"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请选择课程', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('projectName')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="教授"
                             name="professor"
                             :rules="[
                               {required: true, message: '请选择教授', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('professor')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="TA"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请选择TA', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('ta')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="Term"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请输入', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="Location"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请输入', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="Instructor Email"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请输入', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label-col="{span: 9}" label="Mode of Delivery"
                             name="projectName"
                             :rules="[
                               {required: true, message: '请输入', trigger: 'blur'}
                             ]"
                >
                  <a-input readonly v-model:value="formState.data.projectName" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card title="课程大纲">
            <a-form-item label=" " name="type" :colon="false">
              <a-radio-group name="radioGroup" v-model:value="formState.data.type">
                <a-radio :value="1">手动录入</a-radio>
                <a-radio :value="2">上传附件</a-radio>
              </a-radio-group>
            </a-form-item>
            <Manually :formList="formState.formList" />
          </a-card>
          <a-card title="Professor- and Course-Specific Policies">
            <Manually :formList="formState.otherList" />
          </a-card>
        </a-form>
      </a-card>
    </page-layout>
    <BasicTableModal v-model:visible="modalConfig.show"
                     v-if="modalConfig.show"
                     :columns="modalConfig.commonColumns"
                     :fetchAjax="modalConfig.api"
                     :title="modalConfig.title"
                     :searchForm="modalConfig.searchForm"
                     @selectUniversity="value => selectItem(value, modalConfig.currentType)"
    />
  </a-spin>
</template>

<script setup>
import { page as projectPage } from '@/api/module/courseBaseInfo'
import { professorpage } from "@/api/module/professor";
import { page as TaPage } from "@/api/module/ta";
import {onMounted, reactive, ref} from "vue";
import Manually from "../component/manually"
import BasicTableModal from '@/component/basic-table-modal'

const modalConfig = reactive({
  title: '',
  api: '',
  show: false,
  commonColumns: [],
  searchForm: [],
  projectNameColumns: [
    { dataIndex: "courseType", key: "courseType", title: "学科类别" },
    { dataIndex: "courseCode", key: "courseCode", title: "课程代码" },
    { dataIndex: "courseName", key: "courseName", title: "课程名称" },
    { dataIndex: "projectName", key: "projectName", title: "项目名称" },
    { dataIndex: "schoolCnName", key: "schoolCnName", title: "学期" },
    { dataIndex: "schoolCnName", key: "schoolCnName", title: "TA" },
    { dataIndex: "schoolCnName", key: "schoolCnName", title: "教授" },
    { dataIndex: "schoolCnName", key: "schoolCnName", title: "课程学分" },
    { dataIndex: "schoolCnName", key: "schoolCnName", title: "项目负责人" },
  ],
  projectNameSearchForm: [
    { label: '课程名', key: 'courseName', type: 'input', placeholder: '请输入' },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      placeholder: '请选择',
      options: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 },
      ]
    },
    { label: '时间段', key: 'time', type: 'rangePicker', outputValue: ['startTime', 'endTime'], placeholder: '请选择' }
  ],
  professorColumns: [
    { dataIndex: "name", key: "name", title: "教授名称" },
    { dataIndex: "courseType", key: "courseType", title: "职称" },
    { dataIndex: "serviceSchool", key: "serviceSchool", title: "所属学校" },
  ],
  professorSearchForm: [
    { label: '教授名称', key: 'name', type: 'input', placeholder: '请输入' },
  ],
  TAColumns: [
    { dataIndex: "taName", key: "taName", title: "TA姓名" },
    { dataIndex: "name", key: "name", title: "年龄" },
    { dataIndex: "taMajor", key: "taMajor", title: "专业" },
    { dataIndex: "name", key: "name", title: "所在学校" },
  ],
  TASearchForm: [
    { label: 'TA姓名', key: 'taName', type: 'input', placeholder: '请输入' },
  ]
})

const buttons = [
  {
    name: 'save',
    event: () => save(),
    type: "primary",
    code: ''
  },
  {
    name: 'reset',
    event: () => resetForm(),
    code: ''
  }
]

const save = () => {
  console.log('save')
}

const resetForm = () => {
  console.log('resetForm')
}

const openDialog = (type) => {
  if (type === 'projectName') {
    modalConfig.title = '选择课程'
    modalConfig.api = projectPage
    modalConfig.commonColumns = [...modalConfig.projectNameColumns]
    modalConfig.searchForm = [...modalConfig.projectNameSearchForm]
  } else if (type === 'professor') {
    modalConfig.title = '选择教授'
    modalConfig.api = professorpage
    modalConfig.commonColumns = [...modalConfig.professorColumns]
    modalConfig.searchForm = [...modalConfig.professorSearchForm]
  } else if (type === 'ta') {
    modalConfig.title = '选择TA'
    modalConfig.api = TaPage
    modalConfig.commonColumns = [...modalConfig.TAColumns]
    modalConfig.searchForm = [...modalConfig.TASearchForm]
  }
  modalConfig.show = true
}

const formState = reactive({
  uploadImgLoading: false,
  data: {
    projectName: '',
    type: 1
  },
  formList: [],
  otherList: [
    {
      label: 'Grade Components',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Missing or Late Assignments',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Exams',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Class Attendance and Participation',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Essays',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Course Schedule',
      key: 'schedule',
      placeholder: '请输入',
      type: 'table'
    },
  ]
})

onMounted(() => {
  formState.formList = [
    {
      label: 'Course Description',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Course Learning Objectives',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Required Textbook and Course Materials',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Language of Instruction',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Institutional Policies',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Class Preparation',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Attendance, Participation and Deliverables',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Academic Integrity Policy',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Grading Scale',
      key: 'description',
      placeholder: '请输入',
      type: 'list'
    },
    {
      label: 'Withdrawal Policy',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Accessibility Accommodations',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Emergency Preparedness',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Inclement Weather',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Student Support Services',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Student Safety',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
    {
      label: 'Technical Support',
      key: 'description',
      placeholder: '请输入',
      type: 'textarea'
    },
  ]
})

const selectItem = (value, type) => {
  console.log(value, type, 'selectItem')
}

</script>

<style scoped>

</style>
